<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="_deviceOperateList"
    :columns="columns"
    row-key="infoId"
    :onValuesChange="onValuesChange"
  >
    <template #toolbars>
      <Row class="w-full mr-3">
        <Col :span="16"> </Col>
        <Col :span="8" class="text-right content-center">
          <Space>
            <b-button
              icon="export"
              @click="onExport"
              code="operationRecord:export"
              >导出</b-button
            >
          </Space>
        </Col>
      </Row>
    </template>
    <template #operation="{ record }">
      <b-button
        icon="detail"
        type="link"
        @click="onView(record)"
        code="operationRecord:query"
        >详情</b-button
      >
    </template>
    <template #status="{ record }">
      <Tag :color="record.status == '1' ? 'success' : 'error'">
        {{ statusEnum[record.status] }}
      </Tag>
    </template>
    <!-- <template #operateType="{ record }">
      {{ typeEnum[record.operateType] }}
    </template> -->
  </ProTable>

  <FormModal :items="items"></FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { Col, Row, Space, Tag } from 'ant-design-vue';
import dayjs from 'dayjs';
import { ProFormProps } from '@/components/ProForm';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { useFormModal } from '@/hooks/formModal';
import { download, listToEnum, listToOption } from '@/utils/utils';
import { getDictType } from '@/api/monitor';
import { deviceOperateList, exportDeviceOperate } from '@/api/notice';

const { FormModal, open } = useFormModal({
  size: 'small',
});

const tableRef = ref();

const _deviceOperateList = async (params: any) => {
  params.startTime = params.createTime?.[0];
  params.endTime = params.createTime?.[1];
  const res = await deviceOperateList(params);
  return res;
};
const typeEnum: any = ref();
const typeOptions: any = ref();

const init = () => {
  getDictType('device_operate_type').then((res) => {
    typeEnum.value = listToEnum(res.data as any, 'dictCode', 'dictLabel');
    typeOptions.value = listToOption(res.data as any, 'dictLabel', 'dictValue');
  });
};

init();
const searchParams = ref({});
const onValuesChange = (values: any) => {
  searchParams.value = Object.assign(searchParams.value, values);
};

const onExport = async () => {
  const res = await exportDeviceOperate(searchParams.value);
  download(
    res as unknown as Blob,
    `data_${dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`,
  );
};
const statusEnum: any = {
  '1': '成功',
  '0': '失败',
};
const statusOptions: any = [
  { label: '成功', value: '1' },
  { label: '失败', value: '0' },
];

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '记录编号',
    dataIndex: 'id',
    hideInSearch: true,
  },
  {
    title: '系统模块',
    dataIndex: 'operateModule',
  },
  {
    title: '设备序列号',
    dataIndex: 'deviceCode',
    hideInSearch: true,
  },
  {
    title: '操作类型',
    dataIndex: 'operateType',
    valueEnum: {
      ...typeEnum.value,
    },
  },
  {
    title: '操作状态',
    dataIndex: 'status',
    valueEnum: statusEnum,
  },
  {
    title: '操作地址',
    dataIndex: 'operateIp',
    hideInSearch: true,
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    isTime: true,
  },
  {
    title: '操作人',
    dataIndex: 'createBy',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 150,
  },
]);
const items = computed<ProFormProps['items']>(() => [
  {
    label: '操作模块',
    type: 'input',
    field: 'operateModule',
  },
  {
    label: '操作人',
    type: 'input',
    field: 'createBy',
  },
  {
    label: '请求地址',
    type: 'input',
    field: 'operateUri',
  },
  {
    label: '操作地址',
    type: 'input',
    field: 'operateIp',
  },
  {
    label: '操作类型',
    type: 'select',
    field: 'operateType',
    props: {
      options: typeOptions.value,
    },
  },
  {
    label: '请求参数',
    type: 'input',
    field: 'requestParam',
  },
  {
    label: '操作状态',
    type: 'select',
    field: 'status',
    props: {
      options: statusOptions,
    },
  },
  {
    label: '操作时间',
    type: 'input',
    field: 'createTime',
  },
]);

const onView = async (record: any) => {
  open({
    title: '操作记录详情',
    modalType: 'disabled',
    defaultValue: {
      ...record,
    },
    serviceApi: async (params: any): Promise<any> => {},
  });
};
</script>
